

<template>
  <div class="session-wrapper">
    <div class="search-wrapper">
      <a-button type="primary" @click="reload" :loading="loading"
        >刷新</a-button
      >
      <a-button
        type="primary"
        ghost
        v-acl="['sys:menu:create']"
        :loading="loading"
        @click="create"
        >新增菜单</a-button
      >
      <a-button
        type="primary"
        ghost
        v-acl="['sys:menu:edit']"
        :loading="loading"
        @click="edit"
        >编辑菜单</a-button
      >
    </div>
    <div class="flex-1 scrollbar">
      <a-spin :spinning="loading">
      <table class="origin-table hadBorder">
        <thead>
          <tr>
            <th>目录</th>
            <th>菜单</th>
            <th>按钮</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="oneMenu in menus" :key="oneMenu.id">
            <tr>
              <menu-item
                :menu="oneMenu"
                :activeId="activeMenu.id"
                @active="active"
              />
              <template v-if="!oneMenu.childrenNum">
                <td></td>
                <td></td>
              </template>
            </tr>
            <template v-for="twoMenu in oneMenu.children" :key="twoMenu.id">
              <tr>
                <menu-item
                  :menu="twoMenu"
                  :activeId="activeMenu.id"
                  @active="active"
                />
                <template v-if="!twoMenu.childrenNum">
                  <td></td>
                </template>
              </tr>
              <template
                v-for="threeMenu in twoMenu.children"
                :key="threeMenu.id"
              >
                <tr>
                  <menu-item
                    :menu="threeMenu"
                    :activeId="activeMenu.id"
                    @active="active"
                  />
                </tr>
              </template>
            </template>
          </template>
        </tbody>
      </table>
    </a-spin>
    </div>
    

    <edit ref="editForm" @submit="reload" />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import systemApis from "@/apis/system";
import Edit from "./components/edit.vue";
import { message } from "ant-design-vue";
import MenuItem from "./components/menuItem.vue";

export default defineComponent({
  name: "Menu",
  components: { Edit, MenuItem },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const editForm = ref(null);
    const state = reactive({
      menus: [] as Array<any>,
      loading: false as boolean,
      activeMenu: {
        id: 0,
      } as any,
    });
    const reload = async () => {
      state.loading = true;
      const res: any = await systemApis.menuTree();
      if (res.code === 0) {
        state.menus = res.data;
      }
      state.loading = false;
    };
    const active = (menu: any) => {
      if (state.activeMenu.id === menu.id) {
        state.activeMenu = {
          id: 0,
        };
      } else {
        state.activeMenu = menu;
      }
      console.log(state.activeMenu);
    };
    const create = () => {
      console.log(state.activeMenu);
      if (state.activeMenu.id && state.activeMenu.type === 2) {
        return message.error("按钮类型无法添加子菜单");
      }
      const data: any = {
        parentId: state.activeMenu.id ? state.activeMenu.id : 0,
        parentTitle: state.activeMenu.id ? state.activeMenu.title : "根目录",
        parentPerm: state.activeMenu.id ? state.activeMenu.perm : "",
        type: state.activeMenu.id ? state.activeMenu.type + 1 : 0,
      };
      (editForm as any).value.open("add", data);
    };
    const edit = () => {
      if (!state.activeMenu.id) {
        return message.error("请选择菜单");
      }
      (editForm as any).value.open("edit", state.activeMenu);
    };
    onMounted(() => {
      reload();
    });
    return {
      editForm,
      reload,
      active,
      create,
      edit,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="less">
.origin-table {
  .active {
    background-color: rgba(66, 170, 145, 0.1);
  }

  td {
    cursor: pointer;
  }
}
</style>
